<template>
    <div class="container" ref="container"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { ref, watchEffect } from "vue"
//引入option
import learnStepOption from "../../echarts/learnStepOption"
//引入发送请求的方法
import * as api from ".././../api"

let container = ref<HTMLInputElement | null>(null)

//初始化 需要在dom渲染完成之后

watchEffect(() => {
    //初始化
    let lineCharts = echarts.init(container.value!)

    //发起请求

    api.getLearnStepData()
        .then(res => {
            console.log(res.data.data)
            //声明两个数组 一个是类目数组 另一个是值数组

            let categoryData = ref<IcategoryData>([])

            let lineData = ref<Ilinedata>([])

            lineData.value = res.data.data.map((item: { rate: number, name: string }) => {
                categoryData.value.push(item.name)
                return item.rate
            })
            

            //修改option

            let xAxis = learnStepOption.xAxis;

            let series = learnStepOption.series;

            xAxis.data = categoryData.value;

            series[0].data = lineData.value;

            //合并属性

            let newOption = Object.assign({}, learnStepOption, { xAxis: xAxis }, { series: series })

            //设置option
            lineCharts.setOption(newOption)
        })


}, {
    flush: 'post'
})

</script>
<style scoped>
.container {
    height: 200px;
    border: 1px solid #ccc;
}
</style>